<style>
    .coupon_top{
        position: relative;
        width: 6.13rem;
        height: 1.1rem;
        margin: auto;
        background-image: url(http://ziyan-image.oss-cn-hangzhou.aliyuncs.com/front/shouye/daijin_03.png);
        background-size: cover;
    }
    .coupon_body{
        width: 6.13rem;
        height: auto;
        margin: auto;
        background-size: contain;
        background-image: url(http://ziyan-image.oss-cn-hangzhou.aliyuncs.com/front/shouye/daijin_02.png);
        background-repeat: repeat-y;
        padding-top: 0.2rem;
    }
    .coupon_bottom{
        position: relative;
        width: 6.13rem;
        height: 1.88rem;
        margin: auto;
        background-image: url(http://ziyan-image.oss-cn-hangzhou.aliyuncs.com/front/shouye/daijin_01.png);
        background-size: cover;
    }
    .coupon_bottom .anniu{
        width: 2.8rem;
        height: 0.75rem;
        position: absolute;
        left: 50%;
        top: 0.56rem;
        transform: translateX(-55%);
    }
    .coupon_top .close{
        width: 0.72rem;
        height: 0.72rem;
        position: absolute;
        right: 0;
        top: 0;
    }
    /*-----------------------*/
    .jiangpin1{
        width: 6.13rem;
        height: 10.20rem;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    .jiangpin1>.jp-list1{
        width: 5.11rem;
        height: 2.02rem;
        margin: 0 auto;
        position: relative;
        top: 0;
        left: 0;
        margin-top: 0.25rem;

    }
    .jiangpin1>.jp-list1:nth-child(1){
        margin-top: 1.65rem;
    }
    .jp-list1>img {
        width: 5.11rem;
        height: 2.02rem;
        margin: auto;
        transform: translateX(-6px);
    }
    .jp-list1>.jine-name {
        position: absolute;
        top: 0.15rem;
        left: 1.72rem;
        font-size: 0.19rem;
        color: rgba(236,105,0,1);
        /*line-height: 0.19rem;*/
    }
    .jp-list1>.jine-data {
        position: absolute;
        top: 0.51rem;
        left: 1.72rem;
        font-size: 0.16rem;
        color: rgba(87,87,87,1);
        /*line-height: 0.20rem;*/
    }
    .duihuan{
        position: absolute;
        top: 1rem;
        left: 1.92rem;
        width:1.39rem;
        height:0.41rem;

        z-index:600;
    }
    .black{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
    }
    .baoxiang-gif{
        width: 1.6rem;
        height: 1.6rem;
        top: 50%;
        right: 0;
        background-image: url(http://ziyan-image.oss-cn-hangzhou.aliyuncs.com/front/shouye/two_.png);
        background-size: cover;
        position: fixed;
        z-index: 997;
    }
    .baoxiang-gif>.gif{
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        background-image: url(http://ziyan-image.oss-cn-hangzhou.aliyuncs.com/front/shouye/one_bx.gif);
        background-size: cover;
        z-index: 150;
</style>
<link rel="stylesheet" href="/css/index-index.css?v=5">
<div class="box">
    <div class="jingcai"><a href="javascript:;" onclick="urlTo('/guess/index')"></a></div>
    <div class="paihang"><a href="javascript:;" onclick="urlTo('/rank/index')"></a></div>
    <div class="guize"><a href="javascript:;" onclick="showNotice()"></a></div>
    <div class="active_rule"><a href="javascript:;" onclick="showNotice()"></a></div>
    <div class="black" style="display: none">
        <div class="jiangpin1" style="display: none">
            <div class="coupon_top">
                <div class='close'></div>
            </div>
            <div class="coupon_body"></div>
            <div class="coupon_bottom">
                <div class='anniu'></div>
            </div>
        </div>
    </div>
    <div class="baoxiang-gif" style="display: none">
        <div class="gif"></div>
    </div>
    <div class="dianhua">客服电话：400-888-6517</div>
</div>
<script>
    $(".anniu").click(function () {
        show_loading();
        $(".black").css({'display':'none'});
        $(".jiangpin1").css({'display':'none'});
        var url = "/guess/index";
        window.location.href = url;
    });
    //领取宝箱
    $(".baoxiang-gif").click(function () {
        show_loading();

        $(this).attr("disabled","disabled");
        $.ajax({
            url  : '/index/get-award',
            type : 'post',
            data : {},
            dataType : 'json',
            success : function (msg) {
                close_locading();
                $(".black").css({'display':'block'});
                $(".jiangpin1").css({'display':'block'});
                $(".baoxiang-gif").css({'display':'none'});

                if (msg.code == 200) {
                    if (msg.result.length>0){
                        console.log(msg);
                        var res = msg.result;
                        var html = ""
                        for (var i=0;i<res.length;i++){
                            html+="<div class='jp-list1'>" +
                                "<img src='"+res[i].icon_url+"' alt=''>" +
                                "</div>";
                        }
                        $(".jiangpin1").find('.coupon_body').append(html);
                    }else{
                        console.log(msg);
                        layer.msg("服务器繁忙!请稍后再试!");
                        return;
                    }
                } else{
                    layer.close(index);
                    layer.msg(msg.message);
                }
            }
        });
    });
    /*关闭宝箱*/
    $(".close").click(function () {
        $(".black").css({'display':'none'});
        $(".jiangpin1").css({'display':'none'});
    });
    /*每日宝箱*/
    function chest() {
        $.ajax({
            url  : '/index/get-is-click-winning',
            type : 'post',
            data : {},
            dataType : 'json',
            success : function (msg) {
                console.log(msg);
                if (msg.code == 200) {
                    //type == 300 今日抽奖次数已用完  前端不弹宝箱
                    if (msg.result.info.type == 300){
                        $(".baoxiang-gif").css({'display':'none'});
                    }else{
                        /*显示宝箱*/
                        $(".baoxiang-gif").css({'display':'block'});
                    }
                }
            }
        });
    }

    $(function () {
        chest();
    });
    $('.guanbi,.jiangli-guanbi,.queren,.juan-cha,.jp-juan-cha').on('click',function () {
        $(this).closest('.bao-zhezao').css({"display":"none"});
    });
    $(".benpao").click(function () {
        $(this).closest('.bao-zhezao').css({"display":"none"});
    });
</script>